<link rel="icon" type="image/png" href="StaticResource/AmazeUI/i/favicon.png">
<link rel="apple-touch-icon-precomposed" href="StaticResource/AmazeUI/i/app-icon72x72@2x.png">
<link rel="stylesheet" href="StaticResource/AmazeUI/css/amazeui.min.css" />
<link rel="stylesheet" href="StaticResource/AmazeUI/css/amazeui.datatables.min.css" />
<link rel="stylesheet" href="StaticResource/AmazeUI/css/app.css">
<script src="StaticResource/Common/jquery-1.10.2.min.js"></script>

<script src="StaticResource/AmazeUI/js/amazeui.min.js"></script>
<script src="StaticResource/AmazeUI/js/amazeui.datatables.min.js"></script>
<script src="StaticResource/AmazeUI/js/dataTables.responsive.min.js"></script>
<!--暂时取消主体切换功能-->
<!--<script src="StaticResource/AmazeUI/js/theme.js"></script>-->

<script src="StaticResource/Common/Core.js"></script>
<!--
	作者：sheypang@163.com
	时间：2018-05-10
	描述：自己写的表格排序插件  
	-------------------Start-----------------------
-->
<script src="StaticResource/Plugins/TableSort/tablesort.js"></script>
<link rel="stylesheet" href="StaticResource/Plugins/TableSort/tablesort.css" />
<script>
	//table排序插件
	$(".DataTable").TableSort();

	//新增
	$("#add").click(function() {
		$("#ContentArea").HttpLoad("user/form",null,function(){});
	});
</script>
<!--
	--------------------end------------------------
-->

<!-- 内容区域 -->
<div class="row-content am-cf">
	<div class="row">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
			<div class="widget am-cf">
				<div class="widget-head am-cf">
					<div class="widget-title  am-cf">用户管理</div>
				</div>
				<div class="widget-body  am-fr">
					<div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
						<div class="am-form-group">
							<div class="am-btn-toolbar">
								<div class="am-btn-group am-btn-group-xs">
									<button id="add" type="button" class="am-btn am-btn-default am-btn-success"><span class="am-icon-plus"></span> 新增</button>
									<button id="edit" type="button" class="am-btn am-btn-default am-btn-warning"><span class="am-icon-archive"></span> 编辑</button>
									<button id="delete" type="button" class="am-btn am-btn-default am-btn-danger"><span class="am-icon-trash-o"></span> 删除</button>
								</div>
							</div>
						</div>
					</div>
					<div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
						<div class="am-form-group tpl-table-list-select">
							<select data-am-selected="{btnSize: 'sm'}">
								<option value="option1">所有类别</option>
								<option value="option2">IT业界</option>
								<option value="option3">数码产品</option>
								<option value="option3">笔记本电脑</option>
								<option value="option3">平板电脑</option>
								<option value="option3">只能手机</option>
								<option value="option3">超极本</option>
							</select>
						</div>
					</div>
					<div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
						<div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
							<input type="text" class="am-form-field ">
							<span class="am-input-group-btn">
            <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" type="button"></button>
          </span>
						</div>
					</div>

					<div class="am-u-sm-12 am-scrollable-horizontal">
						<table width="100%" class="DataTable am-table am-table-striped am-table-hover am-table-compact am-table am-table-bordered am-table-striped am-text-nowrap">
							<thead>
								<tr>
									<th>用户名</th>
									<th>角色</th>
									<th sorter=true type="datetime">创建时间</th>
									<th>最后登录</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr class="gradeX">
									<td>Amaze UI 模式窗口</td>
									<td>张鹏飞</td>
									<td>2016-09-22</td>
									<td>2016-09-26</td>
									<td>
										<div class="tpl-table-black-operation">
											<a href="javascript:;">
												<i class="am-icon-pencil"></i> 编辑
											</a>
											<a href="javascript:;" class="tpl-table-black-operation-del">
												<i class="am-icon-trash"></i> 删除
											</a>
										</div>
									</td>
								</tr>
								<tr class="even gradeC">
									<td>有适配微信小程序的计划吗</td>
									<td>天纵之人</td>
									<td>2016-04-26</td>
									<td>
										<div class="tpl-table-black-operation">
											<a href="javascript:;">
												<i class="am-icon-pencil"></i> 编辑
											</a>
											<a href="javascript:;" class="tpl-table-black-operation-del">
												<i class="am-icon-trash"></i> 删除
											</a>
										</div>
									</td>
								</tr>
								<tr class="gradeX">
									<td>请问有没有amazeui 分享插件</td>
									<td>王宽师</td>
									<td>2017-09-26</td>
									<td>
										<div class="tpl-table-black-operation">
											<a href="javascript:;">
												<i class="am-icon-pencil"></i> 编辑
											</a>
											<a href="javascript:;" class="tpl-table-black-operation-del">
												<i class="am-icon-trash"></i> 删除
											</a>
										</div>
									</td>
								</tr>
								<tr class="even gradeC">
									<td>关于input输入框的问题</td>
									<td>着迷</td>
									<td>2016-01-26</td>
									<td>
										<div class="tpl-table-black-operation">
											<a href="javascript:;">
												<i class="am-icon-pencil"></i> 编辑
											</a>
											<a href="javascript:;" class="tpl-table-black-operation-del">
												<i class="am-icon-trash"></i> 删除
											</a>
										</div>
									</td>
								</tr>
								<tr class="even gradeC">
									<td>有没有发现官网上的下载包不好用</td>
									<td>醉里挑灯看键</td>
									<td>2016-09-26</td>
									<td>
										<div class="tpl-table-black-operation">
											<a href="javascript:;">
												<i class="am-icon-pencil"></i> 编辑
											</a>
											<a href="javascript:;" class="tpl-table-black-operation-del">
												<i class="am-icon-trash"></i> 删除
											</a>
										</div>
									</td>
								</tr>

								<tr class="even gradeC">
									<td>我建议WEB版本文件引入问题</td>
									<td>罢了</td>
									<td>2016-09-26</td>
									<td>
										<div class="tpl-table-black-operation">
											<a href="javascript:;">
												<i class="am-icon-pencil"></i> 编辑
											</a>
											<a href="javascript:;" class="tpl-table-black-operation-del">
												<i class="am-icon-trash"></i> 删除
											</a>
										</div>
									</td>
								</tr>
								<!-- more data -->
							</tbody>
						</table>
					</div>
					<div class="am-u-lg-12 am-cf">

						<div class="am-fr">
							<ul class="am-pagination tpl-pagination">
								<li class="am-disabled">
									<a href="#">«</a>
								</li>
								<li class="am-active">
									<a href="#">1</a>
								</li>
								<li>
									<a href="#">2</a>
								</li>
								<li>
									<a href="#">3</a>
								</li>
								<li>
									<a href="#">4</a>
								</li>
								<li>
									<a href="#">5</a>
								</li>
								<li>
									<a href="#">»</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>